<!--
	此示例下载自 https://echarts.apache.org/examples/zh/editor.html?c=line-aqi
-->
<!DOCTYPE html>
<html lang="zh-CN" style="height: 100%">

<head>
  <meta charset="utf-8">
</head>

<body style="height: 100%; margin: 0">
  <div id="container" style="height: 100%"></div>

  <script src="https://cdn.bootcdn.net/ajax/libs/dayjs/1.11.7/dayjs.min.js"></script>
  <script type="text/javascript" src="https://fastly.jsdelivr.net/npm/jquery"></script>
  <script type="text/javascript" src="https://fastly.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
  <!-- Uncomment this line if you want to dataTool extension
  <script type="text/javascript" src="https://fastly.jsdelivr.net/npm/echarts@5.4.3/dist/extension/dataTool.min.js"></script>
  -->
  <!-- Uncomment this line if you want to use gl extension
  <script type="text/javascript" src="https://fastly.jsdelivr.net/npm/echarts-gl@2/dist/echarts-gl.min.js"></script>
  -->
  <!-- Uncomment this line if you want to echarts-stat extension
  <script type="text/javascript" src="https://fastly.jsdelivr.net/npm/echarts-stat@latest/dist/ecStat.min.js"></script>
  -->
  <!-- Uncomment this line if you want to use map
  <script type="text/javascript" src="https://fastly.jsdelivr.net/npm/echarts@4.9.0/map/js/china.js"></script>
  <script type="text/javascript" src="https://fastly.jsdelivr.net/npm/echarts@4.9.0/map/js/world.js"></script>
  -->
  <!-- Uncomment these two lines if you want to use bmap extension
  <script type="text/javascript" src="https://api.map.baidu.com/api?v=3.0&ak=YOUR_API_KEY"></script>
  <script type="text/javascript" src="https://fastly.jsdelivr.net/npm/echarts@5.4.3/dist/extension/bmap.min.js"></script>
  -->

  <script type="text/javascript">
    var dom = document.getElementById('container');
    var myChart = echarts.init(dom, null, {
      renderer: 'canvas',
      useDirtyRect: false
    });
    var app = {};
    var option;
    let colorConfig = [
      {
        start: 0,
        end: 120,
        color: "rgba(245, 80, 71, 1)",
        background: "rgba(245, 80, 71, 0.08)",
      },
      {
        start: 120,
        end: 220,
        color: "rgba(242, 159, 0, 1)",
        background: "rgba(242, 159, 0, 0.08)",
      },
      {
        start: 220,
        end: 300,
        color: "rgba(20, 196, 196, 1)",
        background: "rgba(20, 196, 196, 0.08)",
      },
      {
        start: 300,
        color: "rgba(63, 190, 114, 1)",
        background: "rgba(63, 190, 114, 0.08)",
      }
    ];
    $.get('./aqi-beijing.json', function (data) {
      myChart.setOption(
        (option = {
          legend: {
            show: false
          },
          tooltip: {
            show: false
          },
          grid: {
            top: '10%',
            left: '10%',
            right: '10%',
            bottom: '10%'
          },
          xAxis: {
            // type: 'time',
            boundaryGap: false, // 标签不限制在坐标轴上
            axisLine: {
              show: true,
              lineStyle: {
                color: '#8B949E'
              }
            },
            axisLabel: {
              color: "#626C78",
              fontSize: "18px",
              hideOverlap: true,
              // formatter: function (val) {
              //   return dayjs(Number(val)).format('YYYY.MM.DD')
              // },
            },
            axisTick: {
              show: false
            },

            data: data.map(function (item) {
              return item[0];
            })
          },
          yAxis: [
            {
              min: 0,
              max: 400,
              type: 'value',
              name: '平均换气次数(次/小时)',
              nameTextStyle: {
                color: '#626C78',
                fontSize: 18,
              },
              splitLine: {
                show: false
              },
              axisTick: {
                show: false
              },
              axisLine: {
                show: true,
                symbol: ['none', 'arrow'],
                symbolSize: [7, 8],
                lineStyle: {
                  color: '#8B949E'
                }
              },
            },
            {
              min: -200,
              max: 122300,
              type: 'value',
              name: '风量(m³/h)',
              nameTextStyle: {
                color: '#626C78',
                fontSize: 18,
              },
              splitLine: {
                show: false
              },
              axisLine: {
                show: true,
                symbol: ['none', 'arrow'],
                symbolSize: [7, 8],
                lineStyle: {
                  color: '#8B949E'
                }
              },
            },
          ],
          dataZoom: [
            {
              type: 'inside',
              startValue: '2014-06-01'
            },
            {
              startValue: '2014-06-01'
            }
          ],
          // 线段着色
          visualMap: {
            show: false,
            pieces: [
              {
                gt: colorConfig[0].start,
                lte: colorConfig[0].end,
                color: colorConfig[0].color
              },
              {
                gt: colorConfig[1].start,
                lte: colorConfig[1].end,
                color: colorConfig[1].color
              },
              {
                gt: colorConfig[2].start,
                lte: colorConfig[2].end,
                color: colorConfig[2].color
              },
              {
                gt: colorConfig[3].start,
                color: colorConfig[3].color
              }
            ],
            outOfRange: {
              color: colorConfig[3].color
            }
          },
          series: [
            {
              type: 'line',
              data: data.map(function (item) {
                return {
                  value: item[1],
                  symbol: 'pin',
                  symbolSize:20
                };
              }),
              // 标线
              markLine: {
                silent: true,
                symbol: 'none',//去掉箭头
                lineStyle: {
                  normal: {
                    color: '#1B2129',
                    type: 'dashed'
                  }
                },
                data: [
                  {
                    yAxis: 140,
                    name: '整改阀值',
                    label: {
                      position: 'insideStartTop'
                    }
                  }, {
                    yAxis: 180,
                    name: '诊断阀值',
                    label: {
                      position: 'insideStartTop',
                    }
                  }
                ],
                label: {
                  position: 'insideStartTop',
                  normal: {
                    textStyle: {
                      color: '#424C59'
                    },
                    formatter: function (param) {
                      return param.name;
                    }

                  },
                }
              },
              // 背景着色
              markArea: {
                silent: true,
                data: [
                  [
                    {
                      yAxis: colorConfig[0].start,
                      itemStyle: {
                        color: colorConfig[0].background,
                      }
                    },
                    {
                      yAxis: colorConfig[0].end,
                    },
                  ],
                  [
                    {
                      yAxis: colorConfig[1].start,
                      itemStyle: {
                        color: colorConfig[1].background,
                      }
                    },
                    {
                      yAxis: colorConfig[1].end,
                    },
                  ],
                  [
                    {
                      yAxis: colorConfig[2].start,
                      itemStyle: {
                        color: colorConfig[2].background,
                      }
                    },
                    {
                      yAxis: colorConfig[2].end,
                    },
                  ],
                  [
                    {
                      yAxis: colorConfig[3].start,
                      itemStyle: {
                        color: colorConfig[3].background,
                      }
                    },
                    {
                      yAxis: colorConfig[3].end,
                    },
                  ]
                ],
              },
            }
          ]
        })
      );
    });

    if (option && typeof option === 'object') {
      myChart.setOption(option);
    }

    window.addEventListener('resize', myChart.resize);
  </script>
</body>

</html>